<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        padding: 0;
        margin: 0;
        background-color: #324252;
      }

      h1 {
        font-family: 'Century Gothic';
        margin: 30px auto 30px auto;
        color: #09fbd2;
        width: 100%;
        text-align: center;
      }

      ul.menu {
        padding: 0;
        list-style: none;
        width: 400px;
        margin: 20px auto;
        font-family: 'Century Gothic';
        box-shadow: 0px 0px 25px #00000070;
        clear: both;
        display: table;
      }
      ul.menu .list {
        font-size: 14px;
        border-bottom: 1px solid #324252;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        height: 50px;
        vertical-align: sub;
        background: #3e5165;
        clear: both;
      }
      ul.menu .list:after {
        content: '\f107';
        font-family: FontAwesome;
        position: absolute;
        right: 17px;
        top: 17px;
        padding: 0px 5px;
        color: #fff;
      }
      ul.menu .list:before {
        content: '\f07b';
        font-family: FontAwesome;
        position: absolute;
        left: 17px;
        top: 17px;
        padding: 0px 5px;
        color: #fff;
      }
      ul.menu .list a {
        text-decoration: none;
        color: #fff;
        padding: 17px 0px 17px 45px;
        display: block;
        height: 100%;
        box-sizing: border-box;
      }
      ul.menu .list a:hover {
        background-color: #324252;
        transition: 300ms all;
        color: #09fbd2;
      }
      ul.menu .list .items {
        height: 0px;
        overflow: hidden;
      }
      ul.menu .list .items a {
        padding: 17px;
      }
      ul.menu .list .items a:hover {
        background-color: #3f5d79;
        color: #fff;
        transition: 300ms all;
      }
      ul.menu .list:last-child {
        border-bottom: none;
      }
      ul.menu .active:after {
        content: '\f106';
        font-family: FontAwesome;
        position: absolute;
        right: 17px;
        top: 17px;
        padding: 0px 5px;
        color: #fff;
      }
      ul.menu .active:before {
        content: '\f07c';
        font-family: FontAwesome;
        position: absolute;
        left: 17px;
        top: 17px;
        padding: 0px 5px;
        color: #fff;
      }
      ul.menu .active > .items {
        display: block;
        background: #23313f;
        padding: 0px;
        height: auto;
        color: #fff;
        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        transition: all 200ms;
        clear: both;
        float: left;
        width: 100%;
      }
      ul.menu .active > .items li {
        padding: 0px;
        border-bottom: 1px solid #324252;
        list-style: none;
      }
      ul.menu .active > .items li:last-child {
        border-color: transparent;
        padding-bottom: 0px;
      }
      ul.menu .active > .items .active > .items {
        background-color: #2f4b67;
      }
      ul.menu .active > a {
        color: #46efa4;
        text-transform: uppercase;
        font-weight: bold;
      }
      ul.menu .active .list {
        background: #697d92;
      }
      ul.menu .active .list a {
        padding: 17px 0px 17px 45px;
      }
    </style>
  </head>
  <body>
    <!-- <link
      rel="stylesheet"
      type="text/css"
      href="https://s1.pstatp.com/cdn/expire-1-M/font-awesome/4.6.0/css/font-awesome.min.css"
    /> -->
    <h1>Accordion Menu</h1>
    <ul class="menu">
      <li class="list">
        <a href="#">9月 </a>
        <ul class="items">
          <li><a href="./9月/9.18/高伟.html"> 9.18</a></li>
          <li><a href="./9月/9.20/作业.html"> 9.20</a></li>
          <li><a href="./9月/9.21/9.21作业.html"> 9.21</a></li>
          <li><a href="./9月/9.22/9.22作业.html"> 9.22</a></li>
          <li><a href="./9月/9.25/9.25作业.html"> 9.25</a></li>
          <li><a href="./9月/9.26/9.26作业.html"> 9.26</a></li>
          <li><a href="./9月/9.27/9.27作业.html"> 9.27</a></li>
          <li><a href="./9月/9.28/9.28作业.html"> 9.28</a></li>
        </ul>
      </li>
      <li class="list">
        <a href="#">10月</a>
        <ul class="items">
          <li><a href="./10月/10.8/10.8作业.html"> 10.8 </a></li>
          <li><a href="./10月/10.10/10.10作业.html">10.10 </a></li>
          <li><a href="./10月/10.13/10.13作业.html">10.13</a></li>
          <li><a href="./10月/10.16/作业1.html"> 10.16 </a></li>
          <li><a href="./10月/10.17/10.17.html"> 10.17 </a></li>
          <li><a href="./10月/10.18/10.18作业.html"> 10.18 </a></li>
          <li><a href="./10月/10.20/index.html"> 10.20 </a></li>
          <li><a href="./10月/10.23/10.23.html"> 10.23 </a></li>
          <li><a href="./10月/10.26/index.html"> 10.26</a></li>
          <li><a href="./10月/10.30/10.30.html"> 10.30</a></li>
        </ul>
      </li>
      <li class="list">
        <a href="#">11月</a>
        <ul class="items">
          <li><a href="./11月/11.14/11.14.html"> 11.14</a></li>
          <li><a href="./11月/11.17/index.html"> 11.17</a></li>
          <li><a href="./11月/11.20/index.html"> 11.20</a></li>
        </ul>
      </li>
      <li class="list">
        <a href="#">12月</a>
        <ul class="items">
          <li><a href="./12月/12.9/12.9作业.html"> 12.9</a></li>
          <li><a href="./12月/12.11/dist/index.html"> 12.11</a></li>
        </ul>
      </li>
    </ul>

    <script>
      var list = document.querySelectorAll('.list');

      function accordion(e) {
        e.stopPropagation();
        if (this.classList.contains('active')) {
          this.classList.remove('active');
        } else if (
          this.parentElement.parentElement.classList.contains('active')
        ) {
          this.classList.add('active');
        } else {
          for (i = 0; i < list.length; i++) {
            list[i].classList.remove('active');
          }
          this.classList.add('active');
        }
      }
      for (i = 0; i < list.length; i++) {
        list[i].addEventListener('click', accordion);
      }
    </script>
  </body>
</html>
